<template>
  <div class="main" >
    <div class="main-nav clearFix">
      <div class="logo-left clearFix">
        <span><img :src="imgSrc"></span>
        <span>穿云箭</span>
      </div>
      <div class="LoginRegister clearFix" >
        <ul>
          <li><a @click="login1">登录</a></li>
          <li><a @click="regist1">注册</a></li>
        </ul>
      </div>
      <div class="nav-list clearFix" >
        <ul>
          <li><a href="">首页</a></li>
          <li><a href="">购买</a></li>
          <li><a href="">客户端</a></li>
          <li><a href="">帮助</a></li>
        </ul>
      </div>
    </div>
    <!--登录页面-->
    <div>
      <div class="Login" v-show="isDisplay.no" @click="closePopup" :style="heightObject"></div>
      <div v-show="isDisplay.no">
        <login-frame @listenLogin="popup"></login-frame>
      </div>
    </div>
    <!--注册页面-->
    <div>
      <div class="Login" v-show="isDisplay.ok" @click="closePopup1" :style="heightObject"></div>
      <div v-show="isDisplay.ok">
       <regist-frame @listenLogin="popupR"></regist-frame>
      </div>
    </div>
  </div>
</template>
<script>
  //引入
  import img from  '../../assets/LOGO_color.png'
  import LoginFrame from './login'
  import RegistFrame from './regist'
  export default {
      data () {
          return {
            heightObject:{
//              height:this.height2
              height:''
            },
              imgSrc: img,
              isDisplay:{
                no:false,
                ok:false
              }
          }
      },
      props:['height2'],
      components:{LoginFrame,RegistFrame},
      methods:{
          //登录窗口
          login1:function(){
            var _self = this;
            //设置背景罩高度
            _self.$set(_self.heightObject,'height',_self.height2);
            //定义背景的显示与隐藏
            _self.$set(_self.isDisplay,'no',true);
            console.log(this.isDisplay.no)
          },
          //子组件给父组件传递消息
          popup:function (data) {
            var _self = this;
            _self.$set(_self.isDisplay,'no',data);
          },
//        关闭登录窗口
          closePopup:function () {
            var _self = this;
            _self.$set(_self.isDisplay,'no',false);
          },
          //关闭登录窗口
          closePopup1:function () {
            var _self = this;
            _self.$set(_self.isDisplay,'ok',false);
          },
          //注册窗口
          regist1:function () {
            var _self = this;
            //设置背景罩高度
            _self.$set(_self.heightObject,'height',_self.height2);
            //定义背景的显示与隐藏
            _self.$set(_self.isDisplay,'ok',true);
            console.log(this.isDisplay.ok)
          },
          popupR:function (data) {
            var _self = this;
            _self.$set(_self.isDisplay,'ok',data);
          },
        },
  }
</script>
<style scoped>
  a{
    text-decoration: none;
    color: #333333;
    cursor:pointer;
  }
  .main{
    font-size: 0.9rem;
    /*height: 90px;*/
    width: 100%;
    min-width: 960px;
  }
  .main-nav{
    min-width: 960px;
    /*margin: auto;*/
  }
  .main-nav div{
    display: inline-block;
    line-height: 70px;
  }
  .main-nav ul{
    list-style: none;
  }
  .main-nav ul li{
    display: inline-block;
    text-align: right;
  }
  /*左侧logo*/
  .logo-left{
    float: left;
    width: 26%;
    padding-left: 7%;

  }
  .logo-left span{
    display: inline-block;
    float: left;
    font-size: 1.2rem;
    color: #FF7A3F;
    vertical-align: middle;
  }
  .logo-left span:last-child{
    padding: 2px 0 0 10px;
  }
  .logo-left img{
    height: auto;
    width: auto;
    vertical-align: middle;
  }
  /*右侧导航*/
  .nav-list{
    float: right;
    width: 38%;
  }
  .nav-list ul li{
    float: left;
    width: 25%;
  }
  .nav-list ul li a:hover{
    color: #FF7A3F;
  }
  /*登录注册*/
  .LoginRegister{
    float: right;
    width: 22%;
    color: #FF7A3F;
    padding-right: 7%;
  }
  .LoginRegister ul li{
    float: right;
    text-align: right;
    padding-left: 25px;
  }
  .LoginRegister ul li a{
    padding: 5px 15px;
    border: 1px solid #FF7A3F;
    border-radius: 30px;
    text-align: center;
  }
  .LoginRegister ul li a:hover{
    color: #ffffff;
    background-color: #FF7A3F;
  }
  /*清除浮动*/
  .clearFix:after{
    content: '';
    clear: both;
    display: block;
  }
  /*登录样式块*/
  .Login{
    position: absolute;
    top:0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #000000;
    opacity: 0.2;
    width: 100%;
    z-index:1;
  }
  /*控制显示*/
  .dispaly{
    display: none;
  }
</style>
